import { StepperDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.CorePackage);

# Mantine Core components

[![npm](https://img.shields.io/npm/dm/@mantine/core)](https://www.npmjs.com/package/@mantine/core)

[@mantine/core](https://www.npmjs.com/package/@mantine/core) package
provides essential components: buttons, inputs, modals, typography and many others.
`@mantine/core` package is used internally in most of other `@mantine/*` packages –
it is required to be installed in your project to use Mantine components.

## Installation

<InstallScript packages="@mantine/hooks @mantine/core" />

## Usage

Follow the [getting started guide](/getting-started) to learn how to
complete Mantine setup in your project. Example of using [Stepper](/core/stepper) component:

<Demo data={StepperDemos.usage} demoProps={{ defaultExpanded: false }} />

## License

MIT
